import React from 'react'
import { Modal, Button, Row, Col, Form, Icon, Input } from 'antd'

const FormItem = Form.Item;

let ChangePassWordForm = (props) => {
  const { getFieldDecorator } = props.form
  return (
    <Form onSubmit={props.onLogin} className="login-form">
      <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="用户名">
        {getFieldDecorator('userName', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(
          <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
        )}
      </FormItem>
      <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="原始密码">
        {getFieldDecorator('password', {
          rules: [{ required: true, message: 'Please input your Password!' }],
        })(
          <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
        )}
      </FormItem>
      <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="新密码">
        {getFieldDecorator('newPassword', {
          rules: [{ required: true, message: 'Please input your Password!' }],
        })(
          <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
        )}
      </FormItem>
      <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="确认密码">
        {getFieldDecorator('sureNewPassword', {
          rules: [{ required: true, message: 'Please input your Password!' }],
        })(
          <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
        )}
      </FormItem>
      <FormItem>
        <Col offset={4}>
          <Button type="primary" htmlType="submit" className="login-form-button">
            确认修改
          </Button>
        </Col>
      </FormItem>
    </Form>
  )
}

ChangePassWordForm = Form.create()(ChangePassWordForm)

export const CustomModal = (Com) => (props) => {
  const { visible, loading, handleOk, handleCancel } = props
  return (
    <Modal
      visible={visible}
      title="Title"
      onOk={handleOk}
      onCancel={handleCancel}
      footer={null}
    >
      <Com />
    </Modal>
  )
}

export default CustomModal(ChangePassWordForm)
